<template>
    <div>
        <prolistheader></prolistheader>
        <div class="choose">
            <p>智能<span>&#xe645;</span></p>
            <p>品牌<span>&#xe645;</span></p>
            <p>筛选<span>&#xe627;</span></p>
        </div>
        <!-- <p @click="gotomall">返回</p> -->
        <div class="content">
            <router-link tag='dl' v-for=" item in list" :key="item.id" :to="{name:'detail', params: {name: 'detail'},query:{id:item.id,name:item.name,price:item.price,img:item.img}}">
                <dt><img :src="item.img" alt="" srcset=""></dt>
                <dd>
                    <span>{{item.name}}</span><br/>
                    <span>￥{{item.price}}</span>
                </dd>
            </router-link>
        </div>
    </div>
</template>
<script>
import prolistheader from '@/components/prolist/prolistheader'
import { COMMENTS } from '@/requests/apis'
export default {
  name: 'prolist',
  data () {
    return {
      list: []
    }
  },
  components: {
    prolistheader
  },
  methods: {
    gotomall () {
      this.$router.history.push('/mall')
    },
    gotodetail () {
      this.$router.history.push('/detail')
    }
  },
  mounted () {
    this.$http.get(COMMENTS)
      .then(resp => {
        //   console.log(resp)
        this.list = resp.data.data
      })
  }

}
</script>

<style lang='scss'>
@font-face {
  font-family: 'iconfont';  /* project id 931790 */
  src: url('//at.alicdn.com/t/font_931790_o30xzj90y3.eot');
  src: url('//at.alicdn.com/t/font_931790_o30xzj90y3.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931790_o30xzj90y3.woff') format('woff'),
  url('//at.alicdn.com/t/font_931790_o30xzj90y3.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931790_o30xzj90y3.svg#iconfont') format('svg');
}
.choose{
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    p{
        height: 60px;
        line-height: 60px;
        float: left;
        flex: 1;
        text-align: center;
        align-content: center;
        span{
            font-family: iconfont;
        }
    }
}
.content{
    display: flex;
    flex-wrap: wrap;
    dl{
        margin: 0 20px;
        flex: 1;
        float: left;
    }
}

</style>
